<template>

  <h3>费用：{{ trip.tripFee }}</h3>
  <el-select
      v-model="trip"
      size="large"
      style="width: 240px"
  >
    <el-option
        v-for="item in billTrip"
        :key="item"
        :label="item.tripName"
        :value="item"
    />
  </el-select>
  <el-table :data="trip.billVOS" table-layout="auto"
            :default-sort="{ prop: 'amount', order: 'descending' }">
    <el-table-column prop="time" label="使用时间" width="89" align="right"/>
    <el-table-column prop="purpose" label="用处" width="233" align="right"/>
    <el-table-column prop="category" label="类别" width="233" align="right"/>
    <el-table-column prop="amount" sortable label="金额" width="89" align="right">
      <template v-slot="scope">
        {{ scope.row.amount.toFixed(2) }}
      </template>
    </el-table-column>
  </el-table>

</template>

<script setup>
import {inject, onMounted, ref} from "vue";
import axios from "axios";

const GLOBAL_CONSTANT = inject('GLOBAL_CONSTANT');
const billTrip = ref([]);
const trip = ref({});

onMounted(() => {
  axios.get(GLOBAL_CONSTANT + 'wolf/tally/trip/')
      .then((res) => {
        if (res.data.code === 610) {
          billTrip.value = res.data.data;
          trip.value = billTrip.value[0];
        }
      })
})

</script>

<style scoped>

</style>